<html>
<head>

<title>An example of using an interface</title>

<script language="Javascript" src="../gamelib/gamelib_core.js"></script>
<script language="Javascript" src="../gamelib/gamelib_mouse.js"></script>
<script language="Javascript" src="../gamelib/gamelib_sprites.js"></script>
<script language="Javascript" src="../gamelib/gamelib_interface.js"></script>

<script language="Javascript">

var t,interface1,interface2,hours,minutes,seconds,mymouse,myMenu,mySubMenu,mySubSubMenu,mySubSubSubMenu,myImage,myLabel;

function init(){

	interface1=new In_Interface(240,150,'../gamelib');

	hours=new In_NumericDisplay(148,1,2,13);		// numeric display with 2 digits, using font face 3
	minutes=new In_NumericDisplay(179,1,2,13);	// numeric display with 2 digits, using font face 3
	seconds=new In_NumericDisplay(210,1,2,13);	// numeric display with 2 digits, using font face 3

	interface1.add(hours);	// add all the numeric displays to the interface...
	interface1.add(minutes);
	interface1.add(seconds);

	// now we build up the menu structure. Notice we work in reverse order for each menu, starting with the
	// sub menus, and working back to the first dropdown by adding items and other menus to it. With submenus
	// (ie, they hang off another menu), the x,y position you set is irrelevent - it will be positioned by
	// the interface object as it builds the menu trees. This is why you'll see I leave the x,y co-ordinates at 0,0
	// in the sub menus.

	mySubSubSubMenu1=new In_Menu(0,0,80,'Even more...',80,2,'#444444','#999999','#ffffff','#880000');
	mySubSubSubMenu1.add(new In_MenuItem('SubSubSub 1','alert(\'SubSubsub 1\')',true));
	mySubSubSubMenu1.add(new In_MenuItem('SubSubSub 2','alert(\'SubSubsub 2\')',true));
	mySubSubSubMenu1.add(new In_MenuItem('SubSubSub 3','alert(\'SubSubsub 3\')',true));
	mySubSubSubMenu1.add(new In_MenuItem('SubSubSub 4','alert(\'SubSubsub 4\')',true));

	mySubSubSubMenu=new In_Menu(0,0,80,'More still...',80,2,'#888844','#aaaa88','#ffffaa','#880000');
	mySubSubSubMenu.add(new In_MenuItem('SubSubSub 1','alert(\'SubSubsub 1\')',true));
	mySubSubSubMenu.add(new In_MenuItem('SubSubSub 2','alert(\'SubSubsub 2\')',true));
	mySubSubSubMenu.add(new In_MenuItem('SubSubSub 3','alert(\'SubSubsub 3\')',true));

	mySubSubSubMenu.add(mySubSubSubMenu1);	// <- Notice that I've just added the first menu to this one...

	mySubSubSubMenu.add(new In_MenuItem('SubSubSub 4','alert(\'Subsub 4\')',true));

	mySubSubMenu=new In_Menu(0,0,80,'Yet more...',80,2,'#448844','#88aa88','#aaffaa','#880000');
	mySubSubMenu.add(new In_MenuItem('SubSub1','alert(\'Subsub 1\')',true));
	mySubSubMenu.add(mySubSubSubMenu);
	mySubSubMenu.add(new In_MenuItem('SubSub2','alert(\'Subsub 2\')',true));
	mySubSubMenu.add(new In_MenuItem('SubSub3','alert(\'Subsub 3\')',true));
	mySubSubMenu.add(new In_MenuItem('SubSub4','alert(\'Subsub 4\')',true));

	mySubMenu=new In_Menu(0,0,70,'Options...',80,2,'#884444','#aa8888','#ffaaaa','#880000');
	mySubMenu.add(new In_MenuItem('Colours','alert(\'colours\')',true));
	mySubMenu.add(new In_MenuItem('Workflow','alert(\'workflow\')',true));
	mySubMenu.add(mySubSubMenu);
	mySubMenu.add(new In_MenuItem('File types','alert(\'file types\')',true));
	mySubMenu.add(new In_MenuItem('Backups','alert(\'backups\')',true));

	myMenu=new In_Menu(2,2,70,'File',90,2,'#000088','#aaaaee','#ccccff','#880000');
	myMenu.add(new In_MenuItem('New','alert(\'new\')',true));
	myMenu.add(new In_MenuItem('Open','alert(\'open\')',true));
	myMenu.add(mySubMenu);
	myMenu.add(new In_MenuItem('Save','alert(\'Save\')',true));
	myMenu.add(new In_MenuItem('Save as...','alert(\'Save as...\')',true));
	myMenu.add(new In_MenuItem('Close','interface1.hide()',true));

	// that was the first menu, now we'll have a simple second menu, with just 1 dropdown...

	myMenu2=new In_Menu(73,2,70,'Edit',90,2,'#000088','#aaaaee','#ccccff','#880000');
	myMenu2.add(new In_MenuItem('Undo','alert(\'undo\')',true));
	myMenu2.add(new In_MenuItem('Select','alert(\'select\')',true));
	myMenu2.add(new In_MenuItem('Cut','alert(\'cut\')',true));
	myMenu2.add(new In_MenuItem('Paste','alert(\'paste\')',true));
	myMenu2.add(new In_MenuItem('Delete','alert(\'delete\')',true));

	// ok, we have our 2 menus, so we have to add them to the interface now...

	interface1.add(myMenu);
	interface1.add(myMenu2);

	// let's add a couple of image buttons here. One will just popup an alert,
	// the other will move the interface to position 0,0.

	myButton1=new In_Button(
		110,					// x
		125,					// y
		60,					// width
		20,					// height
		"image",				// type of button
		"alert('Button 1 pressed!')",	// statement to be executed when button clicked
		"../images/button1.gif",	// button initial image
		"../images/button1.gif",	// button mouse out image (usually same as above)
		"../images/button1hi.gif",	// button mouse over image
		"../images/button1click.gif"	// button mouse click image
	);

	myButton2=new In_Button(
		175,					// x
		125,					// y
		60,					// width
		20,					// height
		"image",				// type of button
		"interface1.moveTo(0,0)",	// statement to be executed when button clicked
		"../images/button1.gif",	// button initial image
		"../images/button1.gif",	// button mouse out image (usually same as above)
		"../images/button1hi.gif",	// button mouse over image
		"../images/button1click.gif"	// button mouse click image
	);

	// now add them to the interface...

	interface1.add(myButton1);
	interface1.add(myButton2);

	// that was easy wasn't it? :-)

	interface1.moveTo(100,100);	// move the interface onscreen
	interface1.setBgColor('#eeeeee');// give it a background colour
	interface1.show();			// and show it (it's actually shown by default, so this is not necessary)
	interface1.makeDraggable();


	// Why not make another interface, just for the hell of it :-)
	// Just one simple menu here plus a few text buttons...


	interface2=new In_Interface(240,150,'../gamelib');

	mySubMenu2=new In_Menu(0,0,70,'Options',80,2,'#e8e8e8','#555555','#000000','#880000');

	// we'll name this menu item, as I want to change its properties after I create the menu here...

	colourMenuItem=new In_MenuItem('Colours','alert(\'colours\')',true);

	// we can then just add it to the menu in the usual way.

	mySubMenu2.add(colourMenuItem);
	mySubMenu2.add(new In_MenuItem('Workflow','alert(\'workflow\')',true));
	mySubMenu2.add(new In_MenuItem('File types','alert(\'file types\')',true));
	mySubMenu2.add(new In_MenuItem('Backups','alert(\'backups\')',true));

	myMenu12=new In_Menu(2,2,70,'File',90,2,'#444444','#e8e8e8','#ffffff','#880000');
	myMenu12.add(new In_MenuItem('New','alert(\'new\')',true));
	myMenu12.add(mySubMenu2);
	myMenu12.add(new In_MenuItem('Open','alert(\'open\')',true));
	myMenu12.add(new In_MenuItem('Save','alert(\'Save\')',true));
	myMenu12.add(new In_MenuItem('Save as...','alert(\'Save as...\')',true));


	// All these buttons are going to change the image on the left of the interface by calling
	// the image object's setImage method with a new image. They will also alter the text in the
	// label object we're going to add below...

	myButton3=new In_Button(
		156,					// x
		62,					// y
		80,					// width
		20,					// height
		"text",				// type of button
		"myImage.setImage('../images/face0.gif');myLabel.setFontSize(4);myLabel.setText('Smiley!')", // statement to be executed when button clicked
		"Button 1",				// button text
		"#8888aa",				// button mouse out color
		"#bbbbdd",				// button mouse over color
		"#0000ff",				// button mouse click color
		"#000000",				// button border color
		"#000000",				// button font color
		2					// font size
	);

	myButton4=new In_Button(
		156,					// x
		84,					// y
		80,					// width
		20,					// height
		"text",				// type of button
		"myImage.setImage('../images/face1.gif');myLabel.setText('Sad Face...')", // statement to be executed when button clicked
		"Button 2",				// button text
		"#88aa88",				// button mouse out color
		"#bbddbb",				// button mouse over color
		"#00ff00",				// button mouse click color
		"#000000",				// button border color
		"#000000",				// button font color
		2					// font size
	);

	myButton5=new In_Button(
		156,					// x
		106,					// y
		80,					// width
		20,					// height
		"text",				// type of button
		"myImage.setImage('../images/face2.gif');myLabel.setText('Sort of a glum face...')", // statement to be executed when button clicked
		"Button 3",				// button text
		"#aa8888",				// button mouse out color
		"#ddbbbb",				// button mouse over color
		"#ff0000",				// button mouse click color
		"#000000",				// button border color
		"#000000",				// button font color
		2					// font size
	);

	myButton6=new In_Button(
		156,					// x
		128,					// y
		80,					// width
		20,					// height
		"text",				// type of button
		"myImage.setImage('../images/face3.gif');myLabel.setText('Surprise?')",		// statement to be executed when button clicked
		"Button 4",				// button text
		"#aaaa88",				// button mouse out color
		"#ddddbb",				// button mouse over color
		"#ffff00",				// button mouse click color
		"#000000",				// button border color
		"#000000",				// button font color
		2					// font size
	);

	interface2.add(myMenu12);
	interface2.add(myButton3);
	interface2.add(myButton4);
	interface2.add(myButton5);
	interface2.add(myButton6);

	// Now I'll group the four buttons together in this interface to form a radio group!

	myButton3.makeRadio(myButton4,myButton5,myButton6);

	// Let's add an image to this interface...

	myImage=new In_Image(3,62,150,86,'../images/face0.gif');
	interface2.add(myImage);

	// and finally a label to tell users what to do!

	myLabel=new In_Label(3,20,233,40,"Click the 4 buttons to change the expression on the big yellow face!","center","#000000",2,null,'#ff0000','#ffffff');
	interface2.add(myLabel);

	interface2.moveTo(500,100);
	interface2.setBgColor('#d0d0d0');
	interface2.show();
	interface2.makeDraggable();

	// in the second interface, I'm going to change the action of the 'colours' menu option in the
	// submenu. I'm also going to disable it so it can't be clicked (which sort of hides the fact
	// I've changed the action I guess, but then I'm strange...) As I've set the disabled colour
	// to dark red, then this item will appear in that colour and not respond to the mouse.

	colourMenuItem.setAction('alert(1234)');
	colourMenuItem.disable();








	mymouse=Ms_initmouse();			// start the mouse handler...
	Gl_scrollbars("no");
	Gl_hook('showTime()');	// we'll hook in our function to show the time here...
	Gl_start();			// start things up!
}

function showTime(){
	var dt=new Date();
	hours.setValue(dt.getHours());
	minutes.setValue(dt.getMinutes());
	seconds.setValue(dt.getSeconds());
}

</script>
</head>
<body bgcolor="#666688" onload="init()">

</body>
</html>